<!--%import("js/easySlider1.7.js")-->
<!--%import("../prettyPhoto/prettyPhoto.css")-->
<!--%import("../prettyPhoto/jquery.prettyPhoto.js")-->

<!--// 멀티스킨 사용을 위해 변수 또는 ID 랜덤 지정 -->
{@$skin_id = "easySlider_".mt_rand()}
{@$eslider_id = $skin_id}

<!--// prettyPhoto 테마 -->
<!--@if(!$widget_info->ptypoto_theme)-->
{@$prettyPhoto_theme = "light_rounded"}
<!--@else-->
{@$prettyPhoto_theme = $widget_info->ptypoto_theme}
<!--@end-->

<!--// 슬라이드 이미지 높이 + 테두리 -->
{@$slider_img_width=$widget_info->slider_img_width+($widget_info->slider_img_bdsize*2)}
{@$slider_img_height=$widget_info->slider_img_height+($widget_info->slider_img_bdsize*2)}

<!--@if($widget_info->show_control=='Y' && $widget_info->navigation_control=='Y')-->
{@$nav_width = $slider_img_width}
{@$nav_height = $slider_img_height+40}
<!--@elseif($widget_info->show_control=='Y' && $widget_info->navigation_control=='N')-->
{@$nav_width = $slider_img_width+60}
{@$nav_height = $slider_img_height}
<!--@elseif($widget_info->show_control=='N')-->
{@$nav_width = $slider_img_width}
{@$nav_height = $slider_img_height}
<!--@end-->

<!--// 배경 이미지 경로 -->
{@$skincssimgpath = getSiteUrl()."widgets/contentslider/skins/easySlider/images"}

<style type="text/css">

#easySlider_container_{$eslider_id}{
	margin:0 auto;
	position:relative;
	text-align:left;
	width:{$nav_width}px;
	height:{$nav_height}px;
	background:transparent;
	margin-bottom:2em;
}

#easySlider_content_{$eslider_id}{
	position:relative;
}

/* Easy Slider */
#{$skin_id} ul, #{$skin_id} li{
	margin:0;
	padding:0;
	list-style:none;
}
#{$skin_id} li{ 
	width:{$slider_img_width}px;
	height:{$slider_img_height}px;
	overflow:hidden; 
}	
#prevBtn_{$eslider_id}, #nextBtn_{$eslider_id}{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:40%;
	z-index:1000;
	margin:0;
	padding:0;
	overflow:hidden;
	text-indent:-8000px;
}	

#nextBtn_{$eslider_id}{ 
	left:{$slider_img_width}px;
}														

/* // image replacement */
#prevBtn_{$eslider_id} a, #nextBtn_{$eslider_id} a{  
	display:block;
	position:relative;
	width:30px;
	height:77px;
	background:url('{$skincssimgpath}/btn_prev.gif') no-repeat 0 0;	
}
#nextBtn_{$eslider_id} a{ 
	background:url('{$skincssimgpath}/btn_next.gif') no-repeat 0 0;	
}

/* numeric controls */	
ol#controls_{$eslider_id}{
	margin:1em 0;
	padding:0;
	height:28px;	
}
ol#controls_{$eslider_id} li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
}
ol#controls_{$eslider_id} li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#DAF3F8;
	color:#555;
	padding:0 10px;
	text-decoration:none;
}
ol#controls_{$eslider_id} li.current a{
	background:#5DC9E1;
	color:#fff;
}
ol#controls_{$eslider_id} li a:focus, #prevBtn_{$eslider_id} a:focus, #nextBtn_{$eslider_id} a:focus{outline:none;}

</style>
<!--@if($widget_info->content_items_shuffle=='Y')-->
{@shuffle($widget_info->content_items)}
<!--@end-->
<div id="easySlider_container_{$eslider_id}">
	<div id="easySlider_content_{$eslider_id}">
		<div id="{$skin_id}">
			<ul>
			<!--@foreach($widget_info->content_items as $key => $item)-->

			<!--@if($item->getThumbnail())-->
				<li>
	<!--@if($widget_info->open_article=='Y')-->
		<a href="{$item->getLink()}" <!--@if($item->getLinkedType()!='')-->rel='prettyPhoto'<!--@end--> />
	<!--@elseif($widget_info->open_article=='Z')-->
		<!--@if($widget_info->target_ext_var=='link'&& $item->getLinkedType())-->
		<a href="{$item->getLink()}" <!--@if($item->getLinkedType()!='')-->rel='prettyPhoto'<!--@end--> />
		<!--@else-->
		<a href="{$item->getPreview()}" rel="prettyPhoto"/>
		<!--@end-->
	<!--@end-->
					<img src="{$item->getImgslider()}" title='{$item->getTitle($widget_info->subject_cut_size)}' alt='{$item->getContent($widget_info->subject_cut_size)}' />
					<!--@if($widget_info->open_article!='N')--></a><!--@end-->
				</li>
			<!--@end-->
			<!--@end-->
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#{$skin_id}').easySlider({
		auto: {$widget_info->slide_auto},
		continuous: true,
		controlsShow: <!--@if($widget_info->show_control=='Y')-->true<!--@else-->false<!--@end-->,
		speed: 100,
		numeric: <!--@if($widget_info->navigation_control=='Y')-->true<!--@else-->false<!--@end-->,
		prevId: 'prevBtn_{$eslider_id}',
		nextId: 'nextBtn_{$eslider_id}',
		firstId: 'firstBtn_{$eslider_id}',
		lastId: 'lastBtn_{$eslider_id}',
		numericId: 'controls_{$eslider_id}'
	});

<!--@if($widget_info->target_ext_var=='link'||$widget_info->open_article=='Z')-->
	$("#{$skin_id}").find("a[rel^='prettyPhoto']").prettyPhoto({theme:'{$prettyPhoto_theme}'});
<!--@end-->

});
</script>
